<template>
	<view class="topBar">
		<!-- 自定义导航栏 -->
		<view class="box-bg">
			<view class="box-bg">
				<uni-nav-bar color="#fff" backgroundColor="#3284fc" @clickLeft="back" height="50px" :border="false"
					left-icon="left" leftText="返回" rightText="设置" title="汽车保养-确认订单" />
			</view>
		</view>


		<view class="contentBtn">
			<uni-card style="border-radius: 30rpx; margin-bottom: 300rpx;">
				<!-- 三个小图标 -->
				<view class="bgImg">
					<view class="btn1">我的服务</view>
					<view style="background-color: cadetblue;" class="btn1">支付订单</view>
					<view style="background-color: orangered;" class="btn1">门店服务</view>
				</view>

				<view class="content">
					<!-- 基本信息 -->
					<view class="conInfo">
						<view class="cinfo1">
							<image class="img1" src="/static/images/首页.png"></image>
							<view>
								<view class="title1">伟业汽车美容店(人民路店)</view>
								<view>山阳区人民路99号</view>
							</view>
						</view>

						<view class="cinfo2">
							<image class="img2" src="@/static/myf_img/人员@2x.png"></image>
							<view class="title2">张先生</view>
							<view>186868282858</view>
						</view>

						<view style="border-bottom: none;" class="cinfo3">
							<image class="img3" src="/static/myf_img/车辆-01.png"></image>
							<view @click="show2" style="margin-left: -350rpx;" class="title3">立即预约</view>
							<uni-icons type="right" color="blue" size="20"></uni-icons>
						</view>

						<!-- 预约时间对话框 -->
						<view v-if="showDialog" class="timeDialog">
							<!-- 关闭按钮 -->
							<view class="close-btn" @click="closeDialog">×</view> <!-- 预约时间对话框 -->
							<view class="dialogContent">
								<view class="dialogTitle">预约时间</view>
								<view class="current-time">当前时间: {{ date }} &nbsp;{{time}}</view>
								<view class="appointment-list">
									<picker mode="date" :value="date" start="2024-01-01" end="2025-12-31"
										@change="bindDateChange">
										<view class="picker">{{ date }}</view>
									</picker>
									<picker mode="time" :value="time" start="09:00" end="22:00"
										@change="bindTimeChange">
										<view class="picker">{{ time }}</view>
									</picker>
								</view>
								<view class="dialogBtn"> <button class="cancel-btn" @click="cancel">取消</button> <button
										class="confirm-btn" @click="confirmAppointment">确认</button> </view>
							</view>
						</view>



						<!-- 分割线======== -->
						<view class="cinfo3">
							<image class="img3" src="@/static/myf_img/车辆-01@2x.png"></image>
							<view class="title3">奔驰FWE4/豫A56487</view>
							<uni-icons type="right" color="blue" size="20"></uni-icons>
						</view>

						<view style="border-bottom: 2rpx solid #bfbfbf;" class="cinfo4">
							<view class="title4">服务产品</view>
							<view>共选择<text style="color: royalblue;">2项</text>服务产品</view>
							<view class="serviceInfo">
								<view class="ifno1">
									<view style="font-size: 28rpx; font-weight: 700;">小保养套餐1(合成机油+机滤)</view>
									<view style="color: orange; font-weight: 700;">￥39.9</view>
								</view>
								<view class="ifno1">
									<view style="font-size: 28rpx; font-weight: 700;">小保养套餐1(合成机油+机滤)</view>
									<view style="color: orange; font-weight: 700;">￥39.9</view>
								</view>
							</view>
						</view>

						<!-- 
						<view class="cinfo5">
							<view class="title5">精选汽车</view>
							<view style="color: orange;">￥39.9</view>
						</view> -->

						<view class="cinfo6">
							<image class="img4" src="@/static/myf_img/组 9@2x(3).png"></image>
							<view style="margin-left: -80rpx;" class="title6">代金卷/优惠卷</view>
							<view style="color: orange; font-weight: 700; margin-right: -70rpx;">-10元</view>
							<uni-icons type="right" color="blue" size="20"></uni-icons>
						</view>

					</view>

				</view>
			</uni-card>
		</view>

		<!-- 立即下单 -->
		<view class="bottomItem">
			<view class="bottomInfo">
				<image style="width: 50rpx; height: 50rpx;" src="@/static/myf_img/客服@2x.png"></image>
				<view @click="show = true">联系客服</view>
			</view>
			<!--  -->
			<view class="bottomInfo2">
				<view style="color: orange; margin-left: 100rpx; margin-right: -100rpx; font-weight: 700;">合计:￥39.9
				</view>
				<u-button @click="showPayment" style="width: 170rpx; border-radius: 50rpx; margin-left: 200rpx;"
					color="#bfa" type="primary" :hairline="true" text="立即下单"></u-button>
			</view>
			<u-action-sheet @close="show = false" cancelText="取消拨号" :actions="list" :closeOnClickOverlay="true"
				:closeOnClickAction="true" :show="show"></u-action-sheet>



			<!-- 支付对话框（初始隐藏） -->
			<view class="container">
				<!-- 页面主体内容 -->
				<view class="main-content">
					<!-- 订单信息 -->
					<view class="order-info">
						<view class="platform">车钥匙服务平台</view>
						<view class="total-amount">合计: ¥39.90</view>
					</view>
				</view>

				<!-- 支付弹窗 -->
				<view class="modal-mask" v-if="isPaymentVisible">
					<view class="modal">
						<!-- 关闭按钮 -->
						<view class="close-button" @click="hidePayment">×</view>

						<!-- 标题 -->
						<view class="title">请输入支付密码</view>

						<!-- 金额显示 -->
						<view class="amount">车钥匙服务平台</view>
						<view class="price">¥ 39.90</view>

						<!-- 密码输入框 -->
						<view class="password-input">
							<view v-for="(box, index) in 6" :key="index" class="input-box">
								<text v-if="index < password.length">●</text>
							</view>
						</view>

						<!-- 隐藏的密码输入框 -->
						<input type="password" maxlength="6" v-model="password" @input="handleInput"
							class="hidden-input" focus />

						<!-- 提示信息 -->
						<view v-if="errorMessage" class="error">{{ errorMessage }}</view>

						<!-- 支付方式和零钱按钮 -->
						<view class="actions">
							<view class="payment-method">支付方式</view>
							<view class="change">零钱 ></view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				currentTime: '', // 当前时间 
				date: '2024-12-09', // 默认日期 
				time: '14:00', // 默认时间
				showDialog: false, // 控制对话框的显示

				isPaymentVisible: false, // 控制支付弹窗的显示
				password: "", // 支付密码
				errorMessage: "", // 错误提示
				isSubmitting: false, // 防止重复提交
				list: [{
						name: '165629152662',
					},
					{
						name: '复制',
					}
				],
				show: false,
			}
		},
		methods: {
			show2(){
				this.showDialog=true;
			},
			bindDateChange(e) {
				this.date = e.detail.value
			},
			bindTimeChange(e) {
				this.time = e.detail.value
			},
			confirmAppointment() {
				// 确认预约逻辑
				// console.log('预约时间:', this.data.date, this.data.time);
				this.closeDialog(); // 关闭对话框 
			},
			cancel() { // 取消逻辑 
				this.closeDialog(); // 关闭对话框 
			},
			closeDialog() {
				this.showDialog = false
			},
			back() {
				uni.switchTab({
					url: "/pages/about/about"
				})
			},
			showPayment() {
				// 显示支付弹窗
				this.isPaymentVisible = true;
			},
			hidePayment() {
				// 隐藏支付弹窗
				this.isPaymentVisible = false;
				this.resetPassword(); // 清空密码
			},
			resetPassword() {
				this.password = ""; // 清空密码
			},
			async handleInput() {
				// 支付密码输入完成后触发支付逻辑
				if (this.password.length === 6) {
					this.errorMessage = ""; // 清空错误信息
					this.isSubmitting = true; // 设置为提交中
					try {
						const response = await this.submitPayment();
						if (response.success) {
							// 支付成功处理
							uni.showToast({
								title: "支付成功",
								icon: "success"
							});
							this.hidePayment(); // 关闭支付弹窗
						} else {
							// 显示错误信息
							this.errorMessage = response.message || "支付失败，请重试";
						}
					} catch (error) {
						this.errorMessage = "网络错误，请稍后再试";
					} finally {
						this.isSubmitting = false; // 恢复提交状态
					}
				}
			},
			async submitPayment() {
				// 模拟支付请求
				return new Promise((resolve) => {
					setTimeout(() => {
						if (this.password === "123456") {
							resolve({
								success: true
							});
						} else {
							resolve({
								success: false,
								message: "密码错误"
							});
						}
					}, 2000);
				});
			},
		},
		// mounted() {
		// 	// 获取当前时间 
		// 	const now = new Date();
		// 	this.currentTime = now.toLocaleString()
		// }
	}
</script>

<style>
	.timeDialog {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		height: 200rpx;
	}

	.close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		color: #333;
		cursor: pointer;
	}

	.dialogContent {
		width: 100%;
		padding: 20px;
		box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
		z-index: 998;
		border-radius: 30rpx;
		background-color: #fff;
		text-align: center;
	}

	.dialogTitle {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 10px;
	}

	.current-time {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20px;
		font-weight: 600;
	}

	.picker {
		width: 100%;
		padding: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		margin-bottom: 20px;
		text-align: center;
	}

	.dialogBtn {
		display: flex;
		justify-content: space-between;
	}

	.cancel-btn,
	.confirm-btn {
		width: 45%;
		height: 40px;
		border: none;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
	}

	.cancel-btn {
		background-color: #e0e0e0;
		color: #333;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff
	}

	/* 页面内容样式 */
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f5f5f5;
	}

	.main-content {
		padding: 20px;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.platform {
		font-size: 16px;
		color: #333;
	}

	.total-amount {
		font-size: 16px;
		color: #007aff;
	}


	/* 弹窗遮罩层样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	/* 弹窗样式 */
	.modal {
		width: 60%;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		text-align: center;
		position: relative;
	}

	/* 关闭按钮样式 */
	.close-button {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 18px;
		color: #999;
		cursor: pointer;
	}

	/* 标题样式 */
	.title {
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	/* 金额样式 */
	.amount {
		font-size: 14px;
		color: #999;
	}

	.price {
		font-size: 24px;
		color: #000;
		margin: 10px 0;
	}

	/* 密码输入框样式 */
	.password-input {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
	}

	.input-box {
		width: 40px;
		height: 40px;
		border: 1px solid #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		color: #333;
		border-radius: 5px;
	}

	/* 隐藏的输入框 */
	.hidden-input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
		/* 优先级 */
		z-index: -1;
	}

	/* 错误提示样式 */
	.error {
		color: red;
		font-size: 14px;
		margin-top: 10px;
	}

	/* 支付方式和零钱样式 */
	.actions {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.payment-method,
	.change {
		font-size: 14px;
		color: #007aff;
	}

	.bottomInfo2 {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 600rpx;
		margin-left: 30rpx;
	}

	.bottomInfo {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 200rpx;
		margin-left: 30rpx;
	}

	.bottomItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 1100rpx;
		height: 88rpx;
		background-color: #fff;
	}

	.conInfo .cinfo6 .title6 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
		margin: 0 90rpx 0 -30rpx;
	}

	.conInfo .cinfo6 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: -180rpx;
	}

	.conInfo .img4 {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.conInfo .cinfo5 .title5 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
	}

	.conInfo .cinfo5 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 220rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: -180rpx;
	}

	.conInfo .cinfo4 .title4 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
	}

	.cinfo4 .serviceInfo .ifno1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 430rpx;
		margin-bottom: 20rpx;
	}

	.cinfo4 .serviceInfo {
		margin-top: -100rpx;
	}

	.conInfo .cinfo4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		width: 600rpx;
		height: 280rpx;
		margin-left: 20rpx;
		margin-top: -80rpx;
		margin-bottom: 80rpx;
	}

	.conInfo .cinfo3 .title3 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
		margin-left: -200rpx;
	}

	.conInfo .cinfo3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: -180rpx;
	}

	.conInfo .img3 {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.conInfo .cinfo2 .title2 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
		margin-left: -250rpx;
	}

	.conInfo .cinfo2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600rpx;
		height: 300rpx;
		margin-left: 20rpx;
		margin-top: -180rpx;
	}

	.conInfo .img2 {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.conInfo .cinfo1 .title1 {
		color: black;
		font-weight: 700;
		font-size: 30rpx;
	}

	.conInfo .cinfo1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 400rpx;
		height: 300rpx;
		margin-left: 20rpx;
	}

	.conInfo {}

	.conInfo .img1 {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.bgImg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bgImg .btn1 {
		width: 150rpx;
		height: 150rpx;
		background-color: aqua;
		border-radius: 50%;
		color: #fff;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 150rpx;
		text-align: center;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>